<template>
  <div class="main">
    <el-form class="from" ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="顾客姓名" prop="customer">
        <el-input v-model="form.customer" placeholder="请输入顾客姓名" />
      </el-form-item>
      <el-form-item label="选择商品">
        <el-select v-model="selectedGood" placeholder="请选择商品">
          <el-option
            v-for="item in options"
            :key="item.clothId"
            :label="item.name+' | 单价：'+item.price + ' CNY'"
            :value="item.clothId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择数量">
        <el-input v-model="sum" placeholder="输入购买商品数量" class="goodSum"></el-input>
        <el-button type="primary" @click="addIntoOrder">加入订单</el-button>
      </el-form-item>
      <el-table v-if="tableShow" :data="orderGoods" style="width: 100%" class="table">
        <el-table-column prop="name" label="商品名"></el-table-column>
        <el-table-column prop="sum" label="数量"></el-table-column>
        <el-table-column prop="price" label="价格/CNY"></el-table-column>
      </el-table>
      <el-form-item label="总额/CNY" prop="sum">
        <el-input v-model="orderSum" :disabled="true" />
      </el-form-item>
      <div class="footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { addOrder } from '@/api/orders/order'
import { listClothes } from '@/api/goods/clothes'
export default {
  data() {
    return {
      // 表单
      form: {},
      // 表单校验
      rules: {
        customer: [
          { required: true, message: '顾客名称不能为空', trigger: 'blur' }
        ]
      },
      // 商品列表
      goodsList: [],
      // 选择列表
      options: [],
      // 被选择的商品
      selectedGood: '',
      // 商品数量
      sum: '',
      // 订单商品列表
      orderGoods: [],
      // 是否显示订单商品列表
      tableShow: false,
      // 被选择商品列表
      selectedGoodList:[]
    }
  },
  created() {
    listClothes().then((res) => {
      console.log(res.rows)
      this.goodsList = res.rows
      this.options = this.goodsList
    })
  },
  methods: {
    // 表单提交
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.orderSum === 0) {
            return this.$message({
              message: '请选择商品',
              type: 'warning'
            })
          }
          this.form.sum = this.orderSum;

          this.form.clothList = JSON.stringify(this.selectedGoodList)
          console.log(this.form)
          addOrder(this.form).then((response) => {
            this.msgSuccess('订单生成成功')
          })
        }
      })
    },
    // 取消按钮
    cancel() {
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        clothList: null,
        sum: null,
        customer: null
      }
      this.tableShow = false;
      this.orderGoods = [];
      this.selectedGood = '';
      this.sum = '';
      this.selectedGoodList = [];
    },
    // 添加商品到订单商品列表
    addIntoOrder() {
      if (this.selectedGood === '') {
        return this.$message({
          message: '请选择商品',
          type: 'warning'
        })
      }
      if (this.sum === '') {
        return this.$message({
          message: '请输入数量',
          type: 'warning'
        })
      }
      if (!/(^[1-9]\d*$)/.test(this.sum)) {
        return this.$message({
          message: '请输入正整数',
          type: 'error'
        })
      }
      this.tableShow = true
      this.goodsList.forEach((element) => {
        if (element.clothId === this.selectedGood) {
          const selected = element
          this.orderGoods.push({
            name: selected.name,
            sum: this.sum,
            price: selected.price * this.sum
          })
          const good = {
            name: element.name,
            price:element.price,
            sum: this.sum,
            classify:element.classify.name,
            color:element.color.name,
            material:element.material.name,
            clonthSize:element.size.clonthSize
          }
          this.selectedGoodList.push(good)
        }
      })
    }
  },
  computed: {
    orderSum: function() {
      let total = 0
      this.orderGoods.forEach((element) => {
        total += element.price
      })
      return total
    }
  }
}
</script>

<style lang="scss">
.main {
  display: flex;
  padding-top: 25px;
  padding-left: 20px;
  justify-content: center;
}
.footer {
  margin-left: 50px;
}
.goodSum {
  margin-bottom: 5px;
}
.table {
  margin-bottom: 15px;
}
</style>
